<template>
	<view>
		<image src="/static/xgbj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" style="opacity: 0;">
				今日巡更
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="top">
			<image src="/static/wxggl.png" mode=""></image>
			<view class="top1">
				<view class="top1text">
					已完成
				</view>
				<view class="top1text1">
					任务已完成，辛苦了
				</view>
			</view>
		</view>
		<view class="box">
			<view class="" style="width: 100rpx; height: 40rpx;">

			</view>
			<view class="box_title">
				报修信息
			</view>
			<view class="box_2">
				<view class="box_2text">
					报修类型： <text>个人报修</text>
				</view>
				<view class="box_2text">
					报修项目： <text>马桶</text>
				</view>
				<view class="box_2text">
					报修人 ： <text>乾多多</text>
				</view>
				<view class="box_2text">
					联系方式： <text>188****8888</text>
				</view>
				<view class="box_2text">
					住址信息： <text>比邻小区1号楼1单元101室</text>
				</view>
				<view class="box_2text">
					期望上门时间： <text>2022-03-16 15:00</text>
				</view>
				<view class="box_2text">
					详情信息： <text>马桶坏了</text>
				</view>
			</view>

			<view class="box_3">
				<image src="/static/jiatp.png" mode=""></image>
				<image src="/static/jiatp.png" mode=""></image>
				<image src="/static/jiatp.png" mode=""></image>
			</view>
			<view class="box_title" style="border-left: 8rpx solid #37d6c0;">
				报修处理
			</view>
			<view class="box_2">

				<view class="box_2text">
					修理工 ： <text>李某某</text>
				</view>
				<view class="box_2text">
					联系方式： <text>188****8888</text>
				</view>
				<view class="box_2text">
					上门时间： <text>2022-03-16 15:00</text>
				</view>

				<view class="box_2text">
					完成时间： <text>2022-03-16 15:00</text>
				</view>
				<view class="box_2text">
					详情信息： <text>马桶修好了</text>
				</view>
			</view>

			<view class="box_3" style="padding-bottom: 50rpx;">
				<image src="/static/jiatp.png" mode=""></image>
				<image src="/static/jiatp.png" mode=""></image>
				<image src="/static/jiatp.png" mode=""></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				xungestate: 1
			}
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 10
		},
		methods: {
			xungeng(e) {
				this.xungestate = e
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(255, 255, 255);
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 12rpx;
			height: 24rpx;
			margin-left: 30rpx;
		}
	}

	.top {
		display: flex;
		margin-left: 46rpx;
		margin-top: 60rpx;

		>image {
			width: 97rpx;
			height: 97rpx;
		}
	}



	.top1 {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.top1text {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.top1text1 {
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.box {
		background-color: #FFFFFF;
		width: 90vw;
		margin: 30rpx auto;
		border-radius: 20rpx;
	}

	.box_1 {
		display: flex;
		align-items: center;
		padding: 20rpx;

		.topimage {
			width: 94rpx;
			height: 94rpx;
		}
	}

	.box_1-1 {
		margin-left: 10rpx;
	}

	.topimg1 {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		right: 70rpx;

	}

	.box_1-1text {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		// line-height: 20rpx;
	}

	.box_1-1text1 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		// line-height: 20rpx;
	}

	.box_title {
		// margin-top: 50rpx;
		border-left: 8rpx solid #4ab6f9;
		width: 160rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		// line-height: 20rpx;
	}

	.box_2 {
		width: 91%;
		margin: 30rpx auto;
	}

	.box_2text {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		// line-height: 20rpx;
		margin: 30rpx 0;

		>text {
			color: #333333;
		}
	}

	.texta {
		width: 91%;
		height: 170rpx;
		margin: 0 auto;
		background-color: #f6f6f6;
	}

	.bxxx {
		margin: 30rpx;
	}

	.box_3 {
		width: 91%;
		margin: 50rpx auto;
		display: flex;
		justify-content: space-between;

		>image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.button {
		width: 498rpx;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		color: #FFFFFF;
		text-align: center;
		background-color: #2e79f9;
		border-radius: 35rpx;
		line-height: 70rpx;
	}
</style>
